<template>
  <view class="fu-category">
    <!-- 左侧分类导航 -->
    <view class="fu-category__nav-container">
      <scroll-view 
        class="fu-category__nav"
        scroll-y
        :scroll-top="navScrollTop"
        :scroll-with-animation="true"
      >
        <view 
          v-for="(item, index) in categories" 
          :key="item.id"
          class="fu-category__nav-item"
          :class="{ 'is-active': currentIndex === index }"
          @tap="onNavClick(index)"
        >
          <text class="fu-category__nav-text">{{ item.name }}</text>
        </view>
      </scroll-view>
    </view>
    
    <!-- 右侧内容区域 -->
    <scroll-view 
      class="fu-category__content"
      scroll-y
      :scroll-into-view="scrollIntoView"
      :scroll-with-animation="true"
      @scroll="onContentScroll"
    >
      <view 
        v-for="(category, index) in categories"
        :key="category.id"
        class="fu-category__section"
        :id="`category-${index}`"
      >
        <!-- 分类标题 -->
        <view class="fu-category__section-title">
          {{ category.name }}
          <text class="fu-category__section-subtitle">{{ category.subtitle }}</text>
        </view>
        
        <!-- 商品列表 -->
        <view class="fu-category__grid">
          <view 
            v-for="item in category.items"
            :key="item.id"
            class="fu-category__item"
            @tap="onItemClick(item)"
          >
            <image 
              class="fu-category__item-image"
              :src="item.image"
              mode="aspectFill"
            />
            <text class="fu-category__item-name">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
/**
 * @description 垂直分类组件
 * @property {Array} categories 分类数据
 * @event {Function} item-click 点击商品时触发
 */
export default {
  name: 'FuCategory',
  
  props: {
    // 分类数据
    categories: {
      type: Array,
      default: () => []
    }
  },
  
  data() {
    return {
      currentIndex: 0,
      navScrollTop: 0,
      scrollIntoView: '',
      scrollTop: 0, // 记录滚动位置
      sectionTops: [], // 记录每个分类的顶部位置
      scrolling: false
    }
  },
  
  mounted() {
    this.$nextTick(() => {
      this.calcSectionTops()
    })
  },
  
  beforeDestroy() {
    // 销毁观察器
    if (this.observer) {
      this.observer.disconnect()
      this.observer = null
    }
  },
  
  methods: {
    // 计算每个分类的顶部位置
    calcSectionTops() {
      const query = uni.createSelectorQuery().in(this)
      query.selectAll('.fu-category__section').boundingClientRect(rects => {
        if (!rects) return
        this.sectionTops = rects.map(item => item.top)
      }).exec()
    },
    
    // 点击导航
    onNavClick(index) {
      if (this.currentIndex === index) return
      
      this.scrolling = true
      this.currentIndex = index
      this.scrollIntoView = `category-${index}`
      this.updateNavScroll()
      
      setTimeout(() => {
        this.scrolling = false
        // 重新计算位置
        this.calcSectionTops()
      }, 300)
    },
    
    // 内容区域滚动
    onContentScroll(e) {
      if (this.scrolling) return
      
      const scrollTop = e.detail.scrollTop
      this.scrollTop = scrollTop
      
      // 根据滚动位置判断当前分类
      let index = 0
      const OFFSET = 100 // 偏移量，可以根据实际情况调整
      
      for (let i = 0; i < this.sectionTops.length; i++) {
        const currentTop = this.sectionTops[i] - this.sectionTops[0]
        const nextTop = this.sectionTops[i + 1] - this.sectionTops[0]
        
        if (i === this.sectionTops.length - 1) {
          // 最后一个分类
          if (scrollTop >= currentTop - OFFSET) {
            index = i
          }
        } else {
          // 中间分类
          if (scrollTop >= currentTop - OFFSET && scrollTop < nextTop - OFFSET) {
            index = i
          }
        }
      }
      
      if (this.currentIndex !== index) {
        this.currentIndex = index
        this.updateNavScroll()
      }
    },
    
    // 更新导航栏滚动位置
    updateNavScroll() {
      const NAV_ITEM_HEIGHT = 100 // 导航项高度
      const VISIBLE_COUNT = 6 // 可视区域显示的导航项数量
      
      // 计算导航栏滚动位置
      if (this.currentIndex > VISIBLE_COUNT - 1) {
        this.navScrollTop = (this.currentIndex - VISIBLE_COUNT + 1) * NAV_ITEM_HEIGHT
      } else {
        this.navScrollTop = 0
      }
    },
    
    // 点击商品
    onItemClick(item) {
      this.$emit('item-click', item)
    }
  }
}
</script>

<style lang="scss">
// 添加文本省略的样式
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fu-category {
  display: flex;
  height: 100%;
  background-color: #f8f8f8;
  
  &__nav-container {
    flex-shrink: 0;
    width: 180rpx;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
  }
  
  &__nav {
    height: 100%;
    
    // 隐藏滚动条 - Webkit
    &::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
      background: transparent;
      display: none;
    }
    
    // 隐藏滚动条 - Firefox
    scrollbar-width: none;
    
    // 隐藏滚动条 - IE
    -ms-overflow-style: none;
    
    // H5端特殊处理
    ::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
      background: transparent;
      display: none;
    }
    
    &-item {
      position: relative;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #666;
      
      &.is-active {
        color: #ff4444;
        font-weight: 500;
        background-color: #f8f8f8;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 6rpx;
          height: 36rpx;
          background-color: #ff4444;
          border-radius: 0 4rpx 4rpx 0;
        }
      }
    }
  }
  
  &__content {
    flex: 1;
    height: 100%;
    background-color: #f8f8f8;
    
    // 隐藏滚动条 - Webkit
    &::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
      background: transparent;
      display: none;
    }
    
    // 隐藏滚动条 - Firefox
    scrollbar-width: none;
    
    // 隐藏滚动条 - IE
    -ms-overflow-style: none;
    
    // H5端特殊处理
    ::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
      background: transparent;
      display: none;
    }
  }
  
  &__section {
    padding: 20rpx;
    
    &-title {
      position: sticky; // 标题吸顶
      top: 0;
      z-index: 1;
      background: #f8f8f8;
      padding: 20rpx;
      margin: -20rpx -20rpx 20rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
      @include text-ellipsis;
    }
    
    &-subtitle {
      font-size: 24rpx;
      color: #999;
      font-weight: normal;
      margin-left: 12rpx;
    }
  }
  
  &__grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10rpx;
  }
  
  &__item {
    width: 33.33%;
    padding: 10rpx;
    box-sizing: border-box;
    
    &-image {
      width: 100%;
      height: 180rpx;
      border-radius: 12rpx;
      background-color: #fff;
    }
    
    &-name {
      display: block;
      font-size: 26rpx;
      color: #333;
      text-align: center;
      margin-top: 12rpx;
      @include text-ellipsis;
    }
    
    &:active {
      opacity: 0.7;
    }
  }
}

// 全局滚动条样式（针对 H5）
::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background: transparent;
  display: none;
}
</style> 